<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }

        .box1 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

</head>
<body>
<div class="box" index="0"></div>
<div class="box" index="1"></div>
<div class="box" index="2"></div>
<div class="box" index="3"></div>
<div class="box" index="4"></div>
<div class="box" index="5"></div>
<div class="box" index="6"></div>
<div class="box" index="7"></div>
<div class="box" index="0"></div>
<div class="box" index="1"></div>
<div class="box" index="2"></div>
<div class="box" index="3"></div>
<div class="box" index="4"></div>
<div class="box" index="5"></div>
<div class="box" index="6"></div>
<div class="box" index="7"></div>
<div class="box" index="8"></div>
<div class="box" index="9"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div><div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<div class="box1" index="10"></div>
<script>
    let abox = document.querySelectorAll(".box");
    let abox1 = document.querySelectorAll(".box1");

    document.onmousemove = function (eve) {
        let e = eve || window.event;
// 先走最后一个，找到前一个元素的位置，依次向前
        for (let i = abox.length - 1; i > 0; i--) {
// 设置给了当前元素的left和top     获取前一个元素的left和top
            abox[i].style.left = abox[i - 1].offsetLeft + "px";
            abox[i].style.top = abox[i - 1].offsetTop + "px";
            console.log(abox[i - 1].offsetTop + "px")
        }
// 剩下第一个，直接找鼠标
        abox[0].style.left = e.pageX + "px";
        abox[0].style.top = e.pageY + "px";
    }
    for (let i = abox1.length - 1; i > 0; i--) {
        abox1[i].style.left = random(1, 2000) + "px"
        abox1[i].style.top = random(1, 2000) + "px"
    }

    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min);
    }
</script>

</body>
</html>